<template>
  <view class="goods-info">
    <image src="../static/icon/ti01.png" />
    <view class="goods-box">
      <view class="goods-name" :style="{width:goodsWidth}"> 商品名称在此显示且超出部分隐藏测试下行不行 </view>
      <view class="goods-intro" :style="{width:goodsWidth}">
        商品介绍部分在线测i显示也是同上哈哈哈
      </view>
      <view class="sales" v-if="num == 0"> 销量：100 </view>
      <view class="price-num">
        <view class="goods-price">
          <view class="new-price"> ￥<text>29.98</text></view>
          <view class="old-price"> 原价：￥29.98</view>
        </view>
        <view class="add" @tap="add" v-if="num == 0"> + </view>
      </view>
      <view class="sales" v-if="num > 0">
        销量：100
        <view class="num-btn">
          <view class="min btn" @tap="min"> - </view>
          <view class="num"> {{ num }} </view>
          <view class="add btn" @tap="add"> + </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref, defineEmits } from 'vue';
  const { safeArea } = uni.getSystemInfoSync()
  const emit = defineEmits()
  const goodsWidth = computed(() => {
    return safeArea.width - 196 + 'px'
  })
  const num = ref(0)
  const add = () => {
    num.value = num.value + 1
    emit('add', 'add')
  }
  const min = () => {
    num.value = num.value - 1
  }
</script>

<style lang="scss" scoped>
  .goods-info {
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;

    image {
      width: 80px;
      height: 80px;
      margin-right: 10px;
      border-radius: 10px;
    }

    .goods-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-name,
      .goods-intro {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .goods-name {
        height: 16px;
        font-weight: 500;
        font-size: 14px;
        color: #3D3D3D;
        line-height: 16px;
      }

      .goods-intro {
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 16px;
      }

      .sales {
        height: 11px;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 11px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .num-btn {
          display: flex;
          align-items: center;
        
          .btn {
            width: 16px;
            height: 16px;
            font-size: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            text-align: center;
          }
        
          .add {
            background: #FF3B1E;
            color: #ffffff;
            margin-left: 6px;
          }
        
          .num {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            line-height: 11px;
          }
        
          .min {
            color: #999999;
            background: #EBEBEB;
            margin-right: 6px;
          }
        }
      }

      .price-num {
        display: flex;
        justify-content: space-between;
        .goods-price {
          display: flex;
          align-items: center;
          .new-price {
            font-size: 10px;
            color: #FF3B1E;
            text {
              font-size: 15px;
              font-weight: 600;
            }
          }

          .old-price {
            margin-left: 10px;
            font-weight: 300;
            font-size: 11px;
            color: #AAAAAA;
            line-height: 11px;
            text-decoration: line-through;
          }
        }

        .add {
            width: 16px;
            height: 16px;
            font-size: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            text-align: center;
            background-color: #333333;
            color: #ffffff;
          }
      }
    }
  }
</style>